<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋</title>
  <style>
    canvas {
      display: block;
      margin: 50px auto;
      box-shadow: -2px -2px 2px #000, 5px 5px 5px #000;
    }
  </style>
</head>

<body>
  <canvas id="chess" width="450px" height="450px"></canvas>
  <script>
    var chess = document.getElementById('chess')
    var context = chess.getContext('2d')
    var me = true
    var chessBoard = []
    var over = false


    // 赢法数组
    var wins = []

    // 赢法的统计数组
    var myWin = []
    var computerWin = []

    for (var i = 0; i < 15; i++) {
      chessBoard[i] = []
      for (var j = 0; j < 15; j++) {
        chessBoard[i][j] = 0
      }
    }

    // 三维数组
    for (var i = 0; i < 15; i++) {
      wins[i] = []
      for (var j = 0; j < 15; j++) {
        wins[i][j] = []
      }
    }

    // 横线赢法
    var count = 0
    for (var i = 0; i < 15; i++) {
      for (var j = 0; j < 11; j++) {
        // wins[0][0][0] = true
        // wins[0][1][0] = true
        // wins[0][2][0] = true
        // wins[0][3][0] = true
        // wins[0][4][0] = true

        // wins[0][1][1] = true
        // wins[0][2][1] = true
        // wins[0][3][1] = true
        // wins[0][4][1] = true
        // wins[0][5][1] = true
        for (var k = 0; k < 5; k++) {
          wins[i][j + k][count] = true
        }
        count++
      }
    }

    // 竖线赢法
    for (var i = 0; i < 15; i++) {
      for (var j = 0; j < 11; j++) {
        for (var k = 0; k < 5; k++) {
          wins[j + k][i][count] = true
        }
        count++
      }
    }

    // 斜线赢法
    for (var i = 0; i < 11; i++) {
      for (var j = 0; j < 11; j++) {
        for (var k = 0; k < 5; k++) {
          wins[i + k][j + k][count] = true
        }
        count++
      }
    }

    // 散斜线赢法
    for (var i = 0; i < 11; i++) {
      for (var j = 14; j > 3; j--) {
        for (var k = 0; k < 5; k++) {
          wins[i + k][j - k][count] = true
        }
        count++
      }
    }

    console.log(count)

    for (var i = 0; i < count; i++) {
      myWin[i] = 0
      computerWin[i] = 0
    }

    context.strokeStyle = '#000'

    var logo = new Image()
    logo.src = 'https://s1.ax1x.com/2020/10/25/BeoauD.jpg'
    logo.onload = function () {
      context.drawImage(logo, 0, 0, 450, 450)
      drawChessBoard()
    }

    var drawChessBoard = function () {
      for (var i = 0; i < 15; i++) {
        context.moveTo(15 + i * 30, 15)
        context.lineTo(15 + i * 30, 435)
        context.stroke()

        context.moveTo(15, 15 + i * 30)
        context.lineTo(435, 15 + i * 30)
        context.stroke()
      }
    }

    var oneStep = function (i, j, me) {
      context.beginPath()
      context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI)
      context.closePath()
      var gradient = context.createRadialGradient(
        15 + i * 30 + 2, 15 + j * 30 - 2, 13,
        15 + i * 30 + 2, 15 + j * 30 - 2, 0,
      )
      if (me) {
        gradient.addColorStop(0, '#0A0A0A')
        gradient.addColorStop(1, '#636766')
      } else {
        gradient.addColorStop(0, '#D1D1D1')
        gradient.addColorStop(1, '#F9F9F9')
      }

      context.fillStyle = gradient
      context.fill()
    }

    chess.onclick = function (e) {
      if (over) {
        return
      }
      if (!me) {
        return
      }
      var x = e.offsetX
      var y = e.offsetY
      var i = Math.floor(x / 30)
      var j = Math.floor(y / 30)
      if (chessBoard[i][j] === 0) {
        oneStep(i, j, me)
        chessBoard[i][j] = 1

        for (var k = 0; k < count; k++) {
          if (wins[i][j][k]) {
            myWin[k]++
            computerWin[k] = 6
            if (myWin[k] === 5) {
              window.alert('你赢了')
              over = true
            }
          }
        }
        if (!over) {
          me = !me
          computerAI()
        }
      }
    }

    var computerAI = function () {
      var myScore = []
      var computerScore = []
      var max = 0
      var u = 0, v = 0
      for (var i = 0; i < 15; i++) {
        myScore[i] = []
        computerScore[i] = []
        for (var j = 0; j < 15; j++) {
          myScore[i][j] = 0
          computerScore[i][j] = 0
        }
      }
      for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
          if (chessBoard[i][j] === 0) {
            for (var k = 0; k < count; k++) {
              if (wins[i][j][k]) {
                if (myWin[k] === 1) {
                  myScore[i][j] += 200
                } else if (myWin[k] === 2) {
                  myScore[i][j] += 400
                } else if (myWin[k] === 3) {
                  myScore[i][j] += 2000
                } else if (myWin[k] === 4) {
                  myScore[i][j] += 10000
                }
              }
              if (wins[i][j][k]) {
                if (computerWin[k] === 1) {
                  computerScore[i][j] += 220
                } else if (computerWin[k] === 2) {
                  computerScore[i][j] += 420
                } else if (computerWin[k] === 3) {
                  computerScore[i][j] += 2100
                } else if (computerWin[k] === 4) {
                  computerScore[i][j] += 20000
                }
              }
            }
            if (myScore[i][j] > max) {
              max = myScore[i][j]
              u = i
              v = j
            } else if (myScore[i][j] === max) {
              if (computerScore[i][j] > computerScore[u][v]) {
                u = i
                v = j
              }
            }

            if (computerScore[i][j] > max) {
              max = computerScore[i][j]
              u = i
              v = j
            } else if (computerScore[i][j] === max) {
              if (myScore[i][j] > myScore[u][v]) {
                u = i
                v = j
              }
            }
          }
        }
      }
      oneStep(u, v, false)
      chessBoard[u][v] = 2
      for (var k = 0; k < count; k++) {
        if (wins[u][v][k]) {
          computerWin[k]++
          myWin[k] = 6
          if (computerWin[k] === 5) {
            window.alert('计算机赢了')
            over = true
          }
        }
      }
      if (!over) {
        me = !me
      }
    };
  </script>
</body>

</html>